<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <style type="text/css">
        .form-inline .btn{
            margin-left: 5px;
        }
    </style>
</head>
<script type="text/javascript">
    var options = {
        id : "treeId",
        parentId : "treeParentId",
        pagination: true,
        showColumns : false,
        showRefresh : false,
        expandFirst : false,
        expandColumn : 1,
        url : "/dms/page",
        queryParamsType : "",
        sidePagination : 'server',//server:服务器端分页|client：前端分页
        pageList : [10,30,50,70,100],//可选择单页记录数
        columns : [
            {checkbox : true},
            {field : "namespace",title : "空间",align:"center"},
            {field : "name",title : "名字",align:"center"},
            {field : "shortId",title : "编号",align:"center"},
            {field : "commandType",title : "类型",align:"center"},
            {field : "returnType",title : "结果",align:"center"},
            {field : "targetDataSourceKey",title : "数据源",align:"center"},
            {field : "operate",title : "操作",align:"center",formatter : function (value, row, index) {
                return "<button type='button' class='btn btn-link edit' rid='"+row.id+"'>编辑</button>" +
                    "<button type='button' class='btn btn-link detail' rid='"+row.id+"'>详情</button>";
            }},
            {field : "id",title : "id",visible:false},
            {field : "uid",title : "UID",visible:false},
        ],
        queryParams : function(params){
            var form = $("#apiSearch").serializable();
            return $.extend({},(params ? params : {}),form);
        },
        responseHandler : function (response) {
           return {total : response.total ,rows : response.records};
        }
    };

    $(function () {
        $("#apiTable").bootstrapTreeTable(options);
        //查询
        $("#apiSearch").on("click",".search",function (event) {
            $("#apiTable").bootstrapTreeTable("refresh");
        });
        //新增
        $("#apiSearch").on("click",".add",function (event) {
            var url = "/pages/dms/sqlStatement.html";
            $('#navbar').bootstrapNavbar("load",url,{});
        });
        //编辑
        $("#apiTable").on("click",".edit",function (event) {
            var rid = $(this).attr("rid");
            var url = "/pages/dms/sqlStatement.html";
            $('#navbar').bootstrapNavbar("load",url,{id:rid});
        });
        //详情
        $("#apiTable").on("click",".detail",function (event) {
            var rid = $(this).attr("rid");
            var url = "/pages/dms/sqlStatementDetail.html";
            $('#navbar').bootstrapNavbar("load",url,{id:rid});
        })
    });
</script>
<body>
    <div>
        <form id="apiSearch" class="form-inline">
            <label class="sr-only" for="namespace">命名空间</label>
            <input type="text" class="form-control mb-2 mr-sm-2" id="namespace" name="namespace" placeholder="命名空间">

            <label class="sr-only" for="shortId">编号</label>
            <input type="text" class="form-control mb-2 mr-sm-2" id="shortId" name="shortId" placeholder="编号">

            <label class="sr-only" for="commandType">类型</label>
            <input type="text" class="form-control mb-2 mr-sm-2" id="commandType" name="commandType" placeholder="类型">


            <label class="sr-only" for="returnType">结果</label>
            <input type="text" class="form-control mb-2 mr-sm-2" id="returnType" name="returnType" placeholder="结果">

            <button type="button" class="btn btn-primary mb-2 search">查询</button>

            <button type="button" class="btn btn-info mb-2 add">新增</button>
        </form>
    </div>
    <div class="table-responsive-md">
        <table id="apiTable" class="table-sm"></table>
    </div>
</body>
</html>